<template>
  <div class="setting">
    <div class="setting-header">
       <router-link to="/mine" tag="span">
          <van-icon name="arrow-left" />
        </router-link>
      <span>设置</span>
      <span></span>
    </div>
    <div>
      <van-cell-group>
        <van-cell title="个人资料" is-link/>
        <van-cell title="账号安全" is-link/>
      </van-cell-group>
      <van-cell-group>
        <router-link to="/address">
          <van-cell title="地址管理" is-link />
        </router-link>
        <van-cell title="手机通讯录" value="已启用" is-link/>
        <van-cell title="消息推送" value="去设置" is-link/>
        <van-cell title="朋友设置" is-link/>
      </van-cell-group>
       <van-cell-group>
        <van-cell title="清除缓存" value="2.34M" is-link />
        <van-cell title="分享APP"  is-link @click="showShare = true"/>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
        <van-cell title="关于我们"  is-link/>
        <van-cell title="检查版本" value="v 5.34.0" is-link/>
      </van-cell-group>
    </div>
    <div class="logout">
      退出登录
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell, CellGroup , Icon , ShareSheet } from 'vant';

Vue.use(Cell);
Vue.use(Icon);
Vue.use(CellGroup);
Vue.use(ShareSheet)
export default {
data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      this.showShare = false;
    },
  },
}
</script>

<style lang="stylus" scoped>
.setting 
  background-color #f2f2f2
  height 100%
  .setting-header
      width 100%
      height .88rem
      font-size .3rem
      background-color #fff
      display flex 
      justify-content space-between
      align-items center
  .van-cell-group 
      margin-top .15rem
  .logout 
      color #794DFA
      width 90%
      font-size .3rem
      background-color #fff
      text-align center
      height .8rem
      line-height .8rem
      margin .4rem 

</style>